<template>
	<el-form class="userAddForm" ref="userInfo" :inline="true" :model="userInfo" label-width="80px">
		<el-form-item label="用户名">
			<el-input v-model="userInfo.userLoginName"></el-input>
		</el-form-item>
		<el-form-item label="密码">
			<el-input v-model="userInfo.userPassword" type="password"></el-input>
		</el-form-item>
		<el-form-item label="姓名">
			<el-input v-model="userInfo.userName"></el-input>
		</el-form-item>
		<el-form-item label="所属部门">
			<el-cascader style="width: 94%;" ref="tree" v-model="departmentCodes" @change="departmentChange" :options="departmentTree"
			 :props="props" clearable>
				<template slot-scope="{ node, data }">
					<span>{{ node.label }} </span>
					<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
				</template>
			</el-cascader>
		</el-form-item>
		<el-form-item label="角色"  >
			<el-select v-model="roles" style="width: 93%;" multiple placeholder="请选择" @change="roleChange">
			    <el-option
			      v-for="item in roleList"
			      :key="item.roleCode"
			      :label="item.roleName"
			      :value="item.roleCode">
			    </el-option>
			  </el-select>
		</el-form-item>
		<el-form-item label="联系电话">
			<el-input v-model="userInfo.userPhone"></el-input>
		</el-form-item>
		<el-form-item label="电子邮箱">
			<el-input v-model="userInfo.userEmail"></el-input>
		</el-form-item>
		<el-form-item label="身份证">
			<el-input v-model="userInfo.userIdcard"></el-input>
		</el-form-item>
	</el-form>
</template>
<script>
	import request from '@/utils/request'
	export default {
		name: 'userEdit',
		props: ['userInfo'],
		data() {
			return {
				departmentCodes: null,
				departmentTree: [],
				roleList: [],
				roles: [],
				props: {
					checkStrictly: true,
					value: "departmentCode",
					label: "departmentName",
					leaf: "leaf",
					multiple: true
				},
			}
		},
		watch: {
			userInfo: function(val) {
				this.departmentCodes = []
				if (val && val.departmentCodes) {
					var codeArr = val.departmentCodes.split(",");
					for (var i = 0; i < codeArr.length ; i++ ){
						this.departmentCodes.push(codeArr[i])
					}
				}
				if (val && val.userRoles) {
					var roleArr = val.userRoles.split(",");
					for (var i = 0; i < roleArr.length ; i++ ){
						this.roles.push(roleArr[i])
					}
				}
			}
		},
		//页面初始化加载
		created() {
			this.departmentCodes = []
			this.getDepartmentTree();
			this.getRoleList();
		},
		methods: {
			//所部部门
			getDepartmentTree() {
				var val = this.userInfo;
				request({
					url: '/system/department/queryTree',
					method: 'post',
					params: {}
				}).then(response => {
					this.departmentTree = response.data
					this.departmentCodes = []
					if (val && val.departmentCodes) {
						var codeArr = val.departmentCodes.split(",");
						for (var i = 0; i < codeArr.length ; i++ ){
							this.departmentCodes.push(codeArr[i])
						}
					}
				})
			},
			// 部门修改
			departmentChange() {
				var checknodes = this.$refs["tree"].getCheckedNodes(false);
				this.userInfo.departmentCodes = "";
				for (var i = 0; i < checknodes.length; i++) {
					if (i == 0) {
						this.userInfo.departmentCodes = checknodes[i].data.departmentCode;
					} else {
						this.userInfo.departmentCodes += "," + checknodes[i].data.departmentCode
					}
				}
			},
			//所部部门
			getRoleList() {
				var val = this.userInfo;
				request({
					url: '/system/role/query',
					method: 'post',
					params: {}
				}).then(response => {
					this.roleList = response.data
					
					if (val && val.userRoles) {
						var roleArr = val.userRoles.split(",");
						for (var i = 0; i < roleArr.length ; i++ ){
							this.roles.push(roleArr[i])
						}
					}
				})
			},
			roleChange(){
				this.userInfo.userRoles = "";
				for (var i = 0; i < this.roles.length; i++) {
					if (i == 0) {
						this.userInfo.userRoles = this.roles[i];
					} else {
						this.userInfo.userRoles += "," + this.roles[i]
					}
				}
			}
		}
	}
</script>
<style>
	.userAddForm .el-form-item {
		width: 45%;
	}

	.userAddForm .el-input {
		width: 100%;
	}
</style>
